<template>
  <lay-container
    fluid="true"
    style="padding: 10px"
  >
    <lay-row space="10">
      <lay-col :md="24">
        <lay-card>
          <div class="header_right">

            <div style="display: flex">
              <div
                v-for="(item, index) in tabList"
                :key="index"
                class="tab_imte"
                @click="itemBgc = index"
                :class="[index === itemBgc ? 'tab_border' : '']"
              >
                {{ item.name }}
              </div>
            </div>
            <lay-button
              size="sm"
              type="primary"
              @click="editRoleTable"
              v-if="httpUrls.includes('/Setting/AddorUpdateTestItemInfo')"
            >添加</lay-button>
          </div>

          <lay-table
            id="id"
            :columns="columns"
            :dataSource="dataSource"
            :default-toolbar="false"
          ></lay-table>
          <lay-page
            v-model="current"
            v-model:limit="limit"
            :pages="pages"
            :total="total"
            :show-limit="true"
            :show-skip="true"
            :show-count="true"
            :show-page="true"
            @change="changePage"
          ></lay-page>
        </lay-card>
      </lay-col>
    </lay-row>
    <lay-layer
      type="drawer"
      v-model="visible"
      title="添加参数"
      :btn="addUSerBtn"
    >
      <div class="addFrom">
        <lay-form :model="model" required>
          <lay-form-item
            label="参数名称"
            prop="testItemName"
          >
            <lay-input v-model="model.testItemName"></lay-input>
          </lay-form-item>
          <lay-form-item
            label="单位"
            prop="unit"
          >
            <lay-input
              v-model="model.unit"
              type="password"
            ></lay-input>
          </lay-form-item>
          <lay-form-item
            label="建委系统编号"
            prop="matchNo"
          >
            <lay-input
              v-model="model.matchNo"
              type="password"
            ></lay-input>
          </lay-form-item>
        </lay-form>

      </div>
    </lay-layer>
  </lay-container>
</template>

<script lang="ts">
import { reactive, ref, toRefs, onMounted } from "vue";
import {
  GetDeviceInfos,
  AddorUpdateTestItemInfo,
  GetTestItemInfo,
} from "../../../api/module/user";
export default {
  setup() {
    const checkbox = ref(true);

    const columns = [
      {
        title: "序号",
        width: "60px",
        type: "number",
      },
      {
        title: "参数名称（检测项目）",
        key: "testItemName",
      },
      {
        title: "单位",
        key: "unit",
      },
      {
        title: "建委系统编号",
        key: "matchNo",
      },
    ];

    onMounted(() => {
        getShebeList();
    });

    const getShebeList = async () => {
      if (!data.httpUrls.includes("/Setting/GetTestItemInfo")) return
      const res: any = await GetTestItemInfo({
        pageIndex: data.current,
        pagePerCount: data.limit,
        condition: '',
      });

      if (res.code == 200) {
        data.total = res.data.totalCount;
        // data.pages = res.data.pageIndex;
        // data.limit = res.data.pagePerCount;
        data.dataSource = res.data.datas;
      }
    };

    const changePage = (item: any) => {
      data.limit = item.limit;
      data.current = item.current;
      getShebeList();
    };

    let httpUrl: any = [];
    httpUrl = sessionStorage.getItem("httpUrl");
    httpUrl = JSON.parse(httpUrl);
    const data = reactive({
      httpUrls: httpUrl,
      current: 1,
      total: 50,
      pages: 0,
      curren: 10,
      limit: 10,
      visible: false,
      dataSource: [] as any,
      itemBgc: 0,
      tabList: [
        {
          name: "建委系统权限",
        },
        {
          name: "交委系统权限",
        },
      ],
    });

    const model = reactive({
      testItemName: "",
      unit: "",
      matchNo: "",
    });

    const editRoleTable = () => {
      data.visible = true;
    };

    const addUSerBtn = [
      {
        text: "确认",
        callback: async () => {
          const res = await AddorUpdateTestItemInfo({
            ...model,
          })
          if (res.code == 200) {
            getShebeList();
            data.visible = false;
          } 
        },
      },
      {
        text: "取消",
        callback: () => {
          data.visible = false;
        },
      },
    ];

    return {
      checkbox,
      columns,
      model,
      addUSerBtn,
      changePage,
      editRoleTable,
      ...toRefs(data),
    };
  },
};
</script>

<style>
.user_box .layui-card.is-hover-shadow:hover,
.layui-card.shadow {
  box-shadow: none;
}
</style>

<style lang="scss" scoped>
.addFrom {
  margin: 12px 16px;
}

.header_right {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.tab_border {
  color: #0066ff;
  border-bottom: 2px solid #0066ff;
}

.tab_imte {
  height: 40px;
  line-height: 40px;
  display: inline-block;
  align-items: center;
  margin-right: 22px;
  border-bottom: 2px solid transparent;
  margin-bottom: 8px;
}
</style>
